<template>
  <!-- 品牌馆 -->
  <view>
    <NavigationBar
      title="品牌馆"
      titleColor="#000"
      :backgroundColor="navbarBackground"
      :titleColor="navbarColor"
    />
    <!-- 横幅海报 -->
    <view class="bannerContainer"></view>
    <!-- 主内容区 -->
    <view class="mainContent">
      <!-- 内容标题 -->
      <view class="contentTitle">
        <text>品牌专场</text>
      </view>
      <!-- 品牌专场 -->
      <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
        <view class="brand" v-for="item in 10" :key="item">
          <image
            src="/static/brandPavilion/brand1.png"
            mode="aspectFit"
          ></image>
          <view>
            <text>富安娜</text>
          </view>
        </view>
      </scroll-view>
      <view class="contentTitle" style="margin-bottom: -20rpx">
        <text>品类区</text>
      </view>
      <!-- 品类区 -->
      <view class="categoryCard" v-for="item in 10" :key="item">
        <view class="categoryInfo">
          <!-- 封面 -->
          <view class="cover">
            <image
              src="/static/brandPavilion/粮油调味.png"
              mode="aspectFit"
            ></image>
          </view>
          <!-- 品类信息 -->
          <view class="info">
            <view class="title">
              <text>粮油调味/新鲜干货</text>
            </view>
            <view class="price">
              <text class="minimum">最低:</text>
              <text class="amount">￥1.20</text>
              <text class="q">起</text>
            </view>
            <!-- 立即进入 -->
            <button class="enter">
              立即进入
              <image src="/static/icon/right.png" mode="aspectFit"></image>
            </button>
          </view>
        </view>
        <view class="line"></view>
      </view>
    </view>
  </view>
</template>

<script>
import NavigationBar from "../../components/NavigationBar.vue";
export default {
  components: {
    NavigationBar,
  },
  data() {
    return {
      navbarBackground: "transparent", // 导航栏颜色
      navbarColor: "#000", // 导航栏字体颜色
    };
  },
  methods: {
    scrollPpg(e) {
      console.log("scrollPpg: ", e);
    },
  },
  onPageScroll({ scrollTop }) {
    if (scrollTop !== 0) {
      this.navbarBackground = "#FF5B2D";
      this.navbarColor = "#fff";
    } else {
      this.navbarBackground = "transparent";
      this.navbarColor = "#000";
    }
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: red !important;
}

// 横幅海报
.bannerContainer {
  width: 100%;
  height: 616rpx;
  background: url("https://www.freeimg.cn/i/2024/02/21/65d5c9369c16b.png")
    no-repeat;
  background-size: 100% 100%;
}

// 主内容区
.mainContent {
  width: 100%;
  background: linear-gradient(
    180deg,
    rgba(252, 170, 87, 1) 0%,
    rgba(253, 94, 16, 1) 100%
  );
  overflow: hidden;

  // 内容标题
  .contentTitle {
    width: 100%;
    height: 65rpx;
    background: url("/static/brandPavilion/文字框.png") no-repeat;
    background-size: 380rpx 65rpx;
    background-position: center;
    text-align: center;
    line-height: 65rpx;
    color: #fff;
    font-size: 26rpx;
    font-weight: bold;
    margin-top: 45rpx;
    position: relative;
    z-index: 999;
  }

  // 品牌专场
  .scroll-view_H {
    width: 100%;
    height: 207rpx;
    margin-top: 28rpx;
    white-space: nowrap;

    .brand {
      display: inline-block;
      width: 197rpx;
      height: 100%;
      background-color: #fff;
      font-size: 28rpx;
      text-align: center;
      margin: 0 12rpx;

      image {
        width: 169rpx;
        height: 133rpx;
        margin: 14rpx auto;
        margin-bottom: 5rpx;
      }
    }
  }

  // 品类区
  .categoryCard {
    width: 740rpx;
    height: 270rpx;
    margin: 0 auto;
    margin-bottom: 40rpx;

    .categoryInfo {
      width: 656rpx;
      height: 232rpx;
      background: linear-gradient(
        180deg,
        rgba(252, 162, 86, 1) 0%,
        rgba(255, 255, 255, 1) 100%
      );
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-evenly;

      // 封面
      .cover {
        width: 278rpx;
        height: 209rpx;
        background-color: #fff;
        box-shadow: 6px 3px 6px rgba(0, 0, 0, 0.02);
        margin-top: 37rpx;
        position: relative;
        z-index: 99;

        image {
          width: 100%;
          height: 100%;
        }
      }

      // 品类信息
      .info {
        width: 320rpx;
        height: 195rpx;
        margin-top: 37rpx;

        .title {
          width: 85%;
          height: 47rpx;
          line-height: 47rpx;
          font-size: 32rpx;
          color: #333;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }

        .price {
          width: 85%;
          height: 75rpx;
          line-height: 75rpx;
          text-align: left;
          color: $main-color;

          .minimum {
            font-size: 22rpx;
          }

          .amount {
            font-size: 40rpx;
            margin: 0 10rpx;
          }

          .q {
            font-size: 24rpx;
          }
        }

        // 立即进入
        .enter {
          width: 180rpx;
          height: 55rpx;
          font-size: 26rpx;
          border-radius: 25rpx;
          background-color: $main-color;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: space-around;
          margin: 0;

          image {
            width: 15rpx;
            height: 20rpx;
            margin-left: 5rpx;
          }
        }
      }
    }

    .line {
      width: 100%;
      height: 40rpx;
      margin: 0 auto;
      position: relative;
      z-index: 1;
      transform: scaleY(1.45) perspective(60rpx) rotateX(25deg);
      background: linear-gradient(
        180deg,
        rgba(255, 223, 196, 1) 0%,
        rgba(255, 242, 232, 1) 16.32%,
        rgba(255, 255, 255, 1) 100%
      );
    }
  }
}
</style>
